<!-- Demo version: 2017.08.12 -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Switch/Change Cameras LIVE using RTCMultiConnection</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="shortcut icon" href="/demos/logo.png">
  <link rel="stylesheet" href="/demos/stylesheet.css">
  <script src="/demos/menu.js"></script>

  <style>
    #cameras-selection-container .camera {
      display: inline-block;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 5px;
      margin: 0 5px;
      overflow: hidden;
    }

    #cameras-selection-container .camera:hover, #cameras-selection-container .camera-selected {
      background: yellow;
    }

    #cameras-selection-container .camera img {
      height: 240px;
    }

    #cameras-selection-container .camera h2 {
      font-size: 13px;
    }

    #cameras-selection-container .camera-selected h2 {
      font-size: 17px;
    }
  </style>
</head>
<body>
  <header>
    <a class="logo" href="/demos/"><img src="/demos/logo.png" alt="RTCMultiConnection"></a>
    <a href="/demos/" class="menu-explorer">Menu<img src="/demos/menu-icon.png" alt="Menu"></a>
    <nav>
      <li>
        <a href="/demos/">Home</a>
      </li>
      <li>
        <a href="http://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
      </li>
      <li>
        <a href="http://www.rtcmulticonnection.org/FAQ/">FAQ</a>
      </li>
      <li>
        <a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection#v3-demos">Demos</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
      </li>
      <li>
        <a href="https://github.com/muaz-khan/RTCMultiConnection">Github</a>
      </li>
    </nav>
  </header>

  <h1>
    Switch/Change Cameras LIVE
    <p class="no-mobile">
      Change cameras during a LIVE conference among all users.
    </p>
  </h1>

  <section class="make-center">
    <div style="margin-bottom: 15px;">
      Enter Room Unique ID: <input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20>
      <button id="open-or-join-room" style="display: none;">Auto Open Or Join Room</button>
    </div>

    <div id="videos-container"></div>

    <div id="cameras-selection-container">
      <h2 style="margin-bottom: 15px;">Select to change any camera anytime:</h2>
    </div>
  </section>

<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/dev/adapter.js"></script>
<script src="/socket.io/socket.io.js"></script>

<!-- custom layout for HTML5 audio/video elements -->
<link rel="stylesheet" href="/dev/getHTMLMediaElement.css">
<script src="/dev/getHTMLMediaElement.js"></script>
<script>
window.enableAdapter = true; // enable adapter.js

var connection = new RTCMultiConnection();

var cameraSelectionContainer = document.querySelector('#cameras-selection-container');

var dontDuplicate = {};
DetectRTC.load(function() {
  DetectRTC.videoInputDevices.forEach(function(camera) {
    if(dontDuplicate[camera.deviceId])return;
    dontDuplicate[camera.deviceId] = true;

    if(!camera.label) camera.label = 'Camera';

    navigator.mediaDevices.getUserMedia({video: {deviceId: camera.deviceId}}).then(function(stream) {
      var video = document.createElement('video');
      video.onloadedmetadata = function() {
        var photo = takePhoto(video);

        video.removeAttribute('srcObject');
        video.removeAttribute('src');
        stream.getTracks().forEach(function(track) {
          track.stop();
        });

        var div = document.createElement('div');
        div.id = camera.deviceId;
        div.className = 'camera';
        var html = '<img src="' + photo + '">';
        html += '<h2>' + camera.label.split('(')[0].trim() + '</h2>';
        div.innerHTML = html;
        cameraSelectionContainer.appendChild(div);

        div.onclick = function() {
          if((div.className || '').indexOf('camera-selected') !== -1) return;

          querySelectorAll('.camera-selected').forEach(function(element) {
            element.className = (element.className || '').replace(/camera-selected/g, '');
          });

          div.className += ' camera-selected';

          if(!connection.attachStreams.length) {
            connection.mediaConstraints.video.optional = [{
              sourceId: div.id
            }];
            document.getElementById('open-or-join-room').onclick();
            return;
          }

          if(!connection.getAllParticipants().length) {
            connection.attachStreams.forEach(function(stream) {
              stream.stop();
            });

            connection.mediaConstraints.video.optional = [{
              sourceId: div.id
            }];
            document.getElementById('open-or-join-room').onclick();
            return;
          }

          connection.attachStreams.forEach(function(stream) {
              stream.stop();
          });

          connection.mediaConstraints.video.optional = [{
              sourceId: div.id
          }];

          setTimeout(function() {
            connection.addStream(connection.session);
          }, 300);
        };
      };
      video.srcObject = stream;
      video.play();
    });
  });
});

function querySelectorAll(selector, element) {
    element = element || document;
    return Array.prototype.slice.call(element.querySelectorAll(selector));
}

function takePhoto(video) {
    var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth || video.clientWidth;
    canvas.height = video.videoHeight || video.clientHeight;

    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    return canvas.toDataURL('image/png');
}

// ......................................................
// .......................UI Code........................
// ......................................................
document.getElementById('open-or-join-room').onclick = function() {
    disableInputButtons();
    connection.openOrJoin(document.getElementById('room-id').value);
};

// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................

// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = '/';

// comment-out below line if you do not have your own socket.io server
// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

connection.socketMessageEvent = 'switch-cameras-demo';

connection.session = {
    audio: true,
    video: true
};

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

connection.videosContainer = document.getElementById('videos-container');
connection.onstream = function(event) {
    event.mediaElement.removeAttribute('src');
    event.mediaElement.removeAttribute('srcObject');

    if(document.querySelector('[data-userid="'+event.userid+'"]')) {
      var mediaElement = document.querySelector('[data-userid="'+event.userid+'"]');
      mediaElement.querySelector('video').srcObject = event.stream;
      mediaElement.id = event.streamid;
      return;
    }

    var video = document.createElement('video');
    video.controls = true;
    if(event.type === 'local') {
        video.muted = true;
    }
    video.srcObject = event.stream;

    var width = parseInt(connection.videosContainer.clientWidth / 2) - 20;
    var mediaElement = getHTMLMediaElement(video, {
        title: event.userid,
        buttons: ['full-screen'],
        width: width,
        showOnMouseEnter: false
    });

    connection.videosContainer.appendChild(mediaElement);

    setTimeout(function() {
        mediaElement.media.play();
    }, 5000);

    mediaElement.id = event.streamid;
    mediaElement.setAttribute('data-userid', event.userid);
};

connection.onstreamended = function(event) {
    var mediaElement = document.getElementById(event.streamid);
    if (mediaElement) {
        mediaElement.parentNode.removeChild(mediaElement);
    }
};

function disableInputButtons() {
    document.getElementById('open-or-join-room').disabled = true;
    document.getElementById('room-id').disabled = true;
}

// ......................................................
// ......................Handling Room-ID................
// ......................................................


if (localStorage.getItem(connection.socketMessageEvent)) {
    roomid = localStorage.getItem(connection.socketMessageEvent);
} else {
    roomid = connection.token();
}
document.getElementById('room-id').value = roomid;
document.getElementById('room-id').onkeyup = function() {
    localStorage.setItem(connection.socketMessageEvent, this.value);
};
</script>

  <section class="no-mobile">
    <h2>iOS or Android</h2>
    <p>
      You can write <a href="http://www.rtcmulticonnection.org/docs/Write-iOS-Apps/" target="_blank">iOS</a> or <a href="http://www.rtcmulticonnection.org/docs/Write-Android-Apps/" target="_blank">Android</a> apps for this demo as well. 
    </p>
  </section>

  <footer>
    <small id="send-message"></small>
  </footer>

  <script src="https://cdn.webrtc-experiment.com/common.js"></script>
</body>
</html>
